import React, { useEffect, useState } from "react";
import { View, StyleSheet, Text, Image, TouchableOpacity, } from "react-native";
import { Button, Icon, Slider } from "react-native-tengits-elements";
import { Colors, FontSize } from "../../common/Theme/TTheme";
import { scaleSize } from "../../common/Utils/ToolUtils";
import DataCenter from "../../logic/DataCenter";

export const FlagCabinetComponent = (props) => {
    const{isLocal, containerStyle} = props;
    return (<View style={[styles.flagContainer, containerStyle, isLocal ? {backgroundColor: "#2FC5E5"} : {}]}>
            <Text style={{color: Colors.white, fontSize: FontSize.h5_font}}>{isLocal ? "本柜" : "本集群控制柜"}</Text>
    </View>
    )
}

export const OnlineStatusComponent = (props) => {
    const{isOnline, containerStyle} = props;
    return (<View style={[styles.lineStatusContainer, containerStyle, isOnline ? {backgroundColor: Colors.green_color} : {}]}>
            <Text style={{color: Colors.white, fontSize: FontSize.h5_font}}>{isOnline ? "在线" : "离线"}</Text>
    </View>
    )
}

export const DeviceChangeItem = (props) => {
    const{item, isLocal, onlineStatus, checkedIndex, index, callback} = props;
    return (
        <TouchableOpacity style={[styles.container, checkedIndex == index ? {backgroundColor: Colors.button_color}:{backgroundColor: Colors.white}]}
         onPress={()=>{callback && callback(item, index)}}
        >
        <FlagCabinetComponent isLocal={isLocal}/>
        <OnlineStatusComponent isOnline={onlineStatus} containerStyle={{marginLeft: scaleSize(12)}}/>
        <Text style={[{fontSize:FontSize.h5_font, marginLeft: scaleSize(16)}, checkedIndex == index ? {color: Colors.white} : {color: Colors.text1_color}]}>{`${DataCenter.getTunnleBaseInfo()}  ${item?.gateName}`}</Text>
        <Text style={[{fontSize:FontSize.h5_font, marginLeft: scaleSize(16)}, checkedIndex == index ? {color: Colors.white} : {color: Colors.text2_color}]}>
            {`【${item.portalNumber}】`}
        </Text>
        </TouchableOpacity>
    );
}

export const SqureCheckBox = (props) => {
    if(props.disabled) {
        return <Image style={{width:scaleSize(46), height:scaleSize(46)}} source={require("../../../images/select_dis.png")}/>
    } else if(props.checked){
        return <Image style={{width:scaleSize(46), height:scaleSize(46)}} source={require("../../../images/Checkbox_sel.png")}/>;
    } else {
        return <Image style={{width:scaleSize(46), height:scaleSize(46)}} source={require("../../../images/Checkbox_able.png")}/>
    }
}

export const RoundCheck = (props) => {
    if(props.disabled) {
        return <Image style={{width:scaleSize(46), height:scaleSize(46)}} source={require("../../../images/Radio_dis.png")}/>
    } else if(props.checked){
        return <Image style={{width:scaleSize(46), height:scaleSize(46)}} source={require("../../../images/Radio_sel.png")}/>;
    } else {
        return <Image style={{width:scaleSize(46), height:scaleSize(46)}} source={require("../../../images/Radio_able.png")}/>
    }
}

export const RoundRight = (props) =>{
    if(props.checked) {
        return <Image style={{position: "absolute", top: scaleSize(13), right: scaleSize(13), width:scaleSize(46), height:scaleSize(46)}} source={require("../../../images/select_01.png")}/>
    } else {
        return null;
    }
}

export const CircuteCheckItem = (props) => {
    const{item, checkedIndex, index, callback} = props;
    const isChecked = () => {
        return (checkedIndex||[]).filter(item=>item == index).length > 0;
    }
    return (
        <TouchableOpacity style={[styles.loopCheckContainer, isChecked() ? {backgroundColor: Colors.button_color}:{backgroundColor: Colors.white}]}
         onPress={()=>{callback && callback(item, index)}}
        >
            <SqureCheckBox checked={isChecked()}/>
            <View style={{flexDirection:'column'}}>
                <Text style={[{color: Colors.text1_color, fontSize:FontSize.h3_font, marginLeft: scaleSize(16)}, isChecked() ? {color:Colors.white} : {}]}>{`${item?.loopName}`}</Text>
                <Text style={[{color: Colors.text2_color, fontSize:FontSize.h5_font, marginLeft: scaleSize(16)}, isChecked() ? {color:Colors.white} : {}]}>{`${item?.loopStartPortal}--${item?.loopEndPortal}`}</Text>
            </View>
        </TouchableOpacity>
    );
}

export const CircuitItem = (props) => {
    const{light, title, callback, slideComplete, containerStyle, sliderStyle, disabled} = props;
    const [sliderNumber, setSliderNumber] = useState(light||0);
    useEffect(()=>{
        if(sliderNumber != light) {
            setSliderNumber(light);
        }
    }, [light]);
    return(<View style={[styles.circuteContainer, containerStyle]}>
                {title && <Text numberOfLines={1} style={{maxWidth:scaleSize(140), fontSize: FontSize.h4_font, color:Colors.text1_color, marginRight:scaleSize(8)}}>{`${title}:`}</Text>}
                <View style={{flexDirection:'row', alignItems:'center', paddingRight:scaleSize(0)}}>
                <Text style={{width:scaleSize(72), fontSize: FontSize.h3_font, color: Colors.text4_color}}>{`  ${sliderNumber?sliderNumber:0}`}</Text>
                <Button 
                    buttonStyle={{borderRadius:0, backgroundColor:'transparent', width:scaleSize(100), height:scaleSize(88)}} 
                    icon={<Icon name='remove-circle-outline' color={Colors.button_color} size={scaleSize(40)}/>}
                    onPress={()=>{
                        let value = Math.max(0, sliderNumber - 1);
                        setSliderNumber(value);
                        slideComplete && slideComplete(value);
                }}/>
                <View style={{flex:1}}>
                <View style={{position:'absolute', paddingHorizontal:5, left:0, top:scaleSize(36), right:0, height:10, flexDirection:'row', justifyContent:'space-between'}}>
                    {[10, 20,30,40,50,60,70,80,90,100].map((item, index)=>{
                        return <View key={"up_flag_" + index} style={[{width:scaleSize(2), height:scaleSize(6), backgroundColor:Colors.max_track_bg}, sliderNumber >= item ? {backgroundColor:Colors.min_track_bg} : {}]}></View>
                    })}
                </View>
                <Slider style={[{flex:1, }, sliderStyle]} 
                animateTransitions={false}
                allowTouchTrack={false}
                minimumTrackTintColor={Colors.min_track_bg}
                maximumTrackTintColor={Colors.max_track_bg}
                trackStyle={{ height:scaleSize(18), borderRadius:scaleSize(18)}}
                thumbStyle={{justifyContent:'center', alignItems:'center', width:scaleSize(42), height:scaleSize(62), backgroundColor: 'transparent' }}
                step={1}
                thumbProps={{
                    children: (
                        <View style={{justifyContent:'center', alignItems:'center', width:scaleSize(42), height:scaleSize(42), borderColor:'gray', borderRadius:scaleSize(21), borderWidth:1, backgroundColor: Colors.white}}>
                            <View style={{width:scaleSize(32), height:scaleSize(32), borderRadius:scaleSize(16),backgroundColor: Colors.button_color}}/>
                        </View>
                    ),
                }}
                value={(sliderNumber||0)/1} minimumValue={0} maximumValue={100} 
                onValueChange={(value)=>{setSliderNumber(value);callback && callback(value)}}
                onSlidingComplete={(value)=>{
                    slideComplete && slideComplete(value);
                }}/>
                <View style={{zIndex:-1, position:'absolute', paddingHorizontal:5, left:0, bottom:scaleSize(30), right:0, height:10, flexDirection:'row', justifyContent:'space-between'}}>
                    {[10, 20,30,40,50,60,70,80,90,100].map((item, index)=>{
                        return <View key={"down_flag_" + index} style={[{width:scaleSize(2), height:scaleSize(6), backgroundColor:Colors.max_track_bg}, sliderNumber >= item ? {backgroundColor:Colors.min_track_bg} : {}]}></View>
                    })}
                </View>
                </View>
                <Button 
                    buttonStyle={{borderRadius:0, backgroundColor:'transparent', width:scaleSize(100), height:scaleSize(88)}} 
                    icon={<Icon name='add-circle-outline' color={Colors.button_color} size={scaleSize(40)}/>}
                    onPress={()=>{
                        let value = Math.min(100, sliderNumber/1 + 1);
                        setSliderNumber(value);
                        slideComplete && slideComplete(value);
                }}/>
                {disabled && <View style={{position:'absolute',left:0, right:scaleSize(20),top:0, bottom:0, backgroundColor: Colors.white, opacity: 0.4, flex:1, borderRadius:scaleSize(6)}}/>}
            </View>
        </View>
    )
}

export const CircuitItem2 = (props) => {
    const{light, title, callback, slideComplete, containerStyle, sliderStyle, disabled} = props;
    const [sliderNumber, setSliderNumber] = useState(light||0);
    useEffect(()=>{
        if(sliderNumber != light) {
            setSliderNumber(light);
        }
    }, [light]);
    return(<View style={[styles.circuteContainer2, containerStyle]}>
                {title && <Text numberOfLines={1} style={{fontSize: FontSize.h4_font, color:Colors.text1_color}}>{`${title}:`}</Text>}
                <View style={{flex:1, flexDirection:'row', alignItems:'center', paddingRight:scaleSize(0)}}>
                    <Text style={{width:scaleSize(82), fontSize: FontSize.h3_font, color: Colors.text4_color}}>{`${sliderNumber?sliderNumber:0}`}</Text>
                    <Button 
                        buttonStyle={{borderRadius:0, backgroundColor:'transparent', width:scaleSize(100), height:scaleSize(88)}} 
                        icon={<Icon name='remove-circle-outline' color={Colors.button_color} size={scaleSize(40)}/>}
                        onPress={()=>{
                            let value = Math.max(0, sliderNumber - 1);
                            setSliderNumber(value);
                            slideComplete && slideComplete(value);
                    }}/>
                    <View style={{flex:1, flexDirection:'row',}}>
                        <View style={{position:'absolute',paddingHorizontal:5, left:0, top:scaleSize(4), right:0, height:10, flexDirection:'row', justifyContent:'space-between'}}>
                            {[10, 20,30,40,50,60,70,80,90,100].map((item, index)=>{
                                return <View key={"up_flag_" + index} style={[{width:scaleSize(2), height:scaleSize(6), backgroundColor:Colors.max_track_bg}, sliderNumber >= item ? {backgroundColor:Colors.min_track_bg} : {}]}></View>
                            })}
                        </View>
                        <Slider style={[{flex:1, }, sliderStyle]} 
                        animateTransitions={false}
                        minimumTrackTintColor={Colors.min_track_bg}
                        maximumTrackTintColor={Colors.max_track_bg}
                        trackStyle={{ height:scaleSize(18), borderRadius:scaleSize(18)}}
                        thumbStyle={{justifyContent:'center', alignItems:'center', width:scaleSize(42), height:scaleSize(62), backgroundColor: 'transparent' }}
                        step={1}
                        thumbProps={{
                            children: (
                                <View style={{justifyContent:'center', alignItems:'center', width:scaleSize(42), height:scaleSize(42), borderColor:'gray', borderRadius:scaleSize(21), borderWidth:1, backgroundColor: Colors.white}}>
                                    <View style={{width:scaleSize(32), height:scaleSize(32), borderRadius:scaleSize(16),backgroundColor: Colors.button_color}}/>
                                </View>
                            ),
                        }}
                        value={(sliderNumber||0)/1} minimumValue={0} maximumValue={100} 
                        onValueChange={(value)=>{setSliderNumber(value);callback && callback(value)}}
                        onSlidingComplete={(value)=>{
                            slideComplete && slideComplete(value);
                        }}/>
                        <View style={{zIndex:-1, position:'absolute', paddingHorizontal:5, left:0, bottom: scaleSize(0), right:0, height:10, flexDirection:'row', justifyContent:'space-between'}}>
                            {[10, 20,30,40,50,60,70,80,90,100].map((item, index)=>{
                                return <View key={"down_flag_" + index} style={[{width:scaleSize(2), height:scaleSize(6), backgroundColor:Colors.max_track_bg}, sliderNumber >= item ? {backgroundColor:Colors.min_track_bg} : {}]}></View>
                            })}
                        </View>
                    </View>
                    <Button 
                        buttonStyle={{borderRadius:0, backgroundColor:'transparent', width:scaleSize(100), height:scaleSize(88)}} 
                        icon={<Icon name='add-circle-outline' color={Colors.button_color} size={scaleSize(40)}/>}
                        onPress={()=>{
                            let value = Math.min(100, sliderNumber/1 + 1);
                            setSliderNumber(value);
                            slideComplete && slideComplete(value);
                    }}/>
                    {disabled && <View style={{position:'absolute',left:0, right:scaleSize(20),top:0, bottom:0, backgroundColor:Colors.white, opacity: 0.4, flex:1, borderRadius:scaleSize(6)}}/>}
            </View>
        </View>
    )
}

export const LightRadioItem = (props) => {
    const{light, disabled, checkedIndex, index, callback, sliderCallback, sliderCompleteCallback} = props;
    return (
        <View style={[styles.radioContainer]}
        >
            <TouchableOpacity style={{flexDirection:'row', alignItems:'center'}}
                onPress={()=>{callback && callback(index)}}>
            <RoundCheck checked={checkedIndex == index}/>
            <Text style={{fontSize: FontSize.h3_font, marginLeft:scaleSize(30)}}>{"亮度："}</Text>
            </TouchableOpacity>
            <CircuitItem containerStyle={{flex:1, paddingHorizontal:0, marginBottom:0}}
                sliderStyle={{marginRight:0}}
                light={light}
                disabled={disabled}
                index={index} 
                callback={(value)=>{sliderCallback && sliderCallback(value);}}
                slideComplete={(value)=>{ sliderCompleteCallback && sliderCompleteCallback(value)}}/>
        </View>
    );
}

export const StrategyRadioItem = (props) => {
    const{checkedIndex, index, name, callback, btnCallback} = props;
    return (
        <View style={[styles.radioContainer]}
        >
            <View style={[styles.strategySelContainer, {flex:1, paddingHorizontal:0}]}>
                <TouchableOpacity style={{flexDirection:'row', alignItems:'center'}}
                onPress={()=>{callback && callback(index)}}>
                <RoundCheck  checked={checkedIndex == index}/>
                <Text style={{fontSize: FontSize.h3_font , marginLeft:scaleSize(30)}}>{"采用策略："}</Text>
                <View style={{flex:0.64}}>
                {name ? <Text style={[{fontSize: FontSize.h3_font, color: Colors.text4_color}, checkedIndex != index ? {color: Colors.text3_color} : {}]}>{`${name}`}</Text> : null}
                </View>
                </TouchableOpacity>
                <Button buttonStyle={{paddingVertical:0, width:scaleSize(262), height:scaleSize(62), backgroundColor: Colors.second_button_color}} 
                        titleStyle={{color:Colors.button_color, fontSize:FontSize.h4_font}}
                        title={"选择策略"}
                        disabled={checkedIndex != index}
                        onPress={()=>{
                            btnCallback && btnCallback();
                    }}/>
            </View>
        </View>
    );
}

export const StrategyDescItem = (props) => {
    const{checkedId, id, item, canSel, callback} = props;
    return (<TouchableOpacity style={[styles.strategyContainer, checkedId == id ? {backgroundColor: Colors.button_color}:{backgroundColor: Colors.white}]}
         onPress={()=>{callback && callback(item, id)}}
        >
            {canSel && checkedId == id ? <RoundRight checked containerStyle={{position:'absolute', top:scaleSize(13), right:scaleSize(13)}}/> : null}
            <Text style={[{flex:1, textAlign:'left', fontSize:FontSize.h4_font, color:Colors.text1_color, paddingTop:scaleSize(70)}, checkedId == id ? {color: Colors.white} : {} ]}>{`${item.name}`}</Text>
            <View style={{alignItems:'center'}}>
            <Text style={[{textAlign:'center', width: scaleSize(160), fontSize:FontSize.h5_font, color:Colors.text1_color, marginBottom:scaleSize(12)}, checkedId == id ? {color: Colors.white} : {}]}>{"日循环策略"}</Text>
            </View>
        </TouchableOpacity>
    )
}

export const StrategyTimeTip = (props) => {
    const{item:{time, light}} = props;
    return (<View style={{flexDirection:'row', marginRight:scaleSize(30)}}>
        <Text style={{fontSize: FontSize.h5_font, color: Colors.text2_color}}>{`${time} | 亮度${light}`}</Text>
    </View>)
}

export const TSingleHoleEmptyView = (props) => {
    return <View style={{flex:1, flexDirection:'column', alignItems:'center', paddingTop:scaleSize(48), height:scaleSize(424), backgroundColor: Colors.white, borderRadius: scaleSize(6)}}>
            <Image source={require("../../../images/empty.png")} style={{width:scaleSize(284), height:scaleSize(208)}}/>
            <Text style={{marginTop:scaleSize(48), color: Colors.text1_color, fontSize: FontSize.h3_font}}>{"暂无可配置项"}</Text>
    </View>
}

const styles = StyleSheet.create({
    container:{
        flexDirection:'row',
        alignItems:'center',
        height:scaleSize(102), 
        paddingHorizontal: scaleSize(28),
        borderRadius:scaleSize(6),
        backgroundColor: Colors.white,
        borderWidth:1,
        borderColor: Colors.border_color,
        marginBottom: scaleSize(20),
    },
    flagContainer:{
        height:scaleSize(42),
        paddingHorizontal: scaleSize(12),
        alignItems:'center',
        justifyContent:'center',
        backgroundColor: "#FCB750",
        borderRadius: scaleSize(6)
    },
    lineStatusContainer:{
        height:scaleSize(42),
        paddingHorizontal: scaleSize(12),
        alignItems:'center',
        justifyContent:'center',
        backgroundColor: Colors.error_color,
        borderRadius: scaleSize(6)
    },
    loopCheckContainer:{
        flexDirection:'row',
        alignItems:'center',
        height:scaleSize(120), 
        width:scaleSize(554),
        paddingHorizontal: scaleSize(26),
        paddingVertical:scaleSize(12),
        borderRadius:scaleSize(6),
        backgroundColor: Colors.white,
        borderWidth:1,
        borderColor: Colors.border_color,
        marginBottom: scaleSize(20),
    },
    circuteContainer:{
        flexDirection: "row", 
        height:scaleSize(120),
        alignItems:'center',
        paddingHorizontal:scaleSize(26),
        backgroundColor: Colors.white, 
        //borderWidth:1, 
        borderRadius:scaleSize(6), 
        marginBottom:scaleSize(30),
        //borderColor: Colors.white
    },
    circuteContainer2:{
        flexDirection: "column", 
        height:scaleSize(130),
        padding:scaleSize(10),
        paddingHorizontal:scaleSize(26),
        backgroundColor: Colors.white, 
        borderRadius:scaleSize(6), 
        marginBottom:scaleSize(15),
        // borderWidth:1, 
        // borderColor: 'red'
    },
    radioContainer:{
        flexDirection:'row',
        alignItems:'center',
        justifyContent:'center',
        height:scaleSize(130), 
        paddingLeft: scaleSize(26),
        borderRadius:scaleSize(6),
        backgroundColor: Colors.white,
        borderWidth:1,
        borderColor: Colors.border_color,
        marginBottom: scaleSize(20),
    },
    strategyContainer:{
        width:scaleSize(240),
        borderWidth:1,
        borderColor: Colors.button_color,
        borderRadius:scaleSize(6),
        //alignItems:'center',
        paddingHorizontal:scaleSize(20),
        marginHorizontal:scaleSize(30),
    },
    strategySelContainer:{
        flexDirection: "row", 
        height:scaleSize(120),
        alignItems:'center',
        paddingHorizontal:scaleSize(26),
        backgroundColor: Colors.white, 
        //borderWidth:1, 
        borderRadius:scaleSize(6), 
        //borderColor: Colors.white
    },
});